ড্রপডাউনের উদাহরণ

মাউস আনুন !

ড্রপডাউন

ইমেজ ড্রপডাউনঃ

বেসিক ড্রপডাউন

একটি বেসিক ড্রপডাউন তৈরি করিঃ

kt_satt_skill_example_id=1176

উদাহরণের বর্ণনা

এইচটিএমএলঃ
হোভার করে ড্রপডাউন কন্টেন্ট প্রদর্শনের জন্য একটি এলিমেন্ট ব্যবহার করতে হয়। যেমনঃ অথবা এলিমেন্ট।

ড্রপডাউন কন্টেন্ট রাখার জন্য কন্টেইনার হিসেবে একটি

এলিমেন্ট ব্যবহার করি।

সিএসএসঃ
.dropdown ক্লাসে position:relative ব্যবহার করা হয়েছে। এর কারণ আমরা position:absolute ব্যবহার করে কন্টেন্টগুলোকে বাটনের নিচে দেখাতে চাই।

.dropdown-content ক্লাসটির মধ্যে ড্রপডাউন কন্টেন্টগুলো রয়েছে এবং ইহা ডিফল্ট আকারে অদৃশ্য থাকে এবং মাউস নিয়ে গেলে শুধু দেখা যাবে। min-width 160px সেট করা হয়েছে।

ড্রপডাউন আইটেমকে একটি কার্ডের মত দেখানোর জন্য আমরা সিএসএস(৩) এর box-shadow প্রোপার্টি ব্যবহার করেছি।

:hover সিলেক্টরটি ব্যবহার করা হয়েছে ড্রাপডাউন বাটনের উপর মাউস নিয়ে গেলে ড্রপডাউন আইটেমকে প্রদর্শনের জন্য।

---

 

ড্রপডাউন মেনু

এই উদাহরণটি আগের উদাহরণের মতই, শুধু ড্রপডাউন কন্টেন্টে লিঙ্ক যোগ করা হয়েছেঃ

kt_satt_skill_example_id=1180

---

রাইট-এলাইন ড্রপডাউন কন্টেন্ট

আপনি যদি ড্রপডাউন কন্টেন্টকে ড্রপডাউন বাটনের ডান থেকে শুরু করতে চান তাহলে right: 0; সেট করে দিনঃ

kt_satt_skill_example_id=1186

Content added By

Nayan Islam